<template>
  <div class="container" :style="{backgroundPositionY: (headerNavH - 2) + 'px', backgroundColor: pageBcConfig.backgroundColor, backgroundImage: pageBcConfig.backgroundPicUrl ? 'url(' + pageBcConfig.backgroundPicUrl + ')' : '' }">
    <div v-if="skeletonLoading" class="skeleton-box">
      <div class="skeleton-animate"></div>
      <div
        class="skeleton-layer layer-1 animate-blink bg-box"
        :style="{
          marginTop: headerNavH ? (headerNavH + 16) + 'px' : '80px',
        }"></div>
      <div class="skeleton-layer layer-2 flex mar-t-16">
        <span v-for="(item, index) in 5" :key="index" class="flex-item mar-r-10 animate-blink bg-box"></span>
      </div>
      <div v-for="(itemG, indexG) in 2" :key="indexG">
        <div class="skeleton-layer layer-3 animate-blink bg-box height-33 mar-t-16"></div>
        <div v-for="(item, index) in 2" :key="index" class="skeleton-layer layer-4 flex mar-t-16">
          <div class="width-116 height-116 mar-r-12 animate-blink bg-box"></div>
          <div class="flex-item">
            <span class="animate-blink bg-box height-30"></span>
            <span class="bar-s animate-blink bg-box width-70 height-30 mar-t-12"></span>
          </div>
        </div>
      </div>
    </div>
    <header-nav :dataInfo="resData" @headerNavHeight="headerNavHeight" />
    <template v-if="!getCustomerId">
      <get-user-info
        v-if="isGetUserInfo"
        :showBackBtn="true"
        @showPage="showPage"
        @authPhoneInfo="authPhoneInfo"
        @lowVersion="lowVersionEls"/>
      <get-phone-layer v-if="isGetPhoneLayer" :applyStatus="applyStatus"/>
      <get-phone-info v-if="isGetPhoneInfo" @showPage="showPage"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-layer v-if="isGetPhoneLayer" :applyStatus="applyStatus"/>
      <get-phone-info v-if="isGetPhoneInfo" @showPage="showPage"></get-phone-info>
    </template>
    <div class="module-box">
      <div v-if="topnavObj.componentType === 41" :style="{paddingTop: '38px'}">
        <div class="topnav" :style="{backgroundColor: topnavObj.propMap.backgroundColor, top: (headerNavH - 2) + 'px'}">
          <div v-for="(topnav, navIndex) in topnavObj.topNavList" :key="navIndex"
            class="topnav--item"
            :class="{'topnav--scroll': topnavObj.topNavList.length > 5}"
            :style="{backgroundColor: topNavActive === navIndex ? topnavObj.propMap.selectBackgroundColor : '',color: topNavActive === navIndex ? topnavObj.propMap.selectFontColor : topnavObj.propMap.fontColor}"
            @click="topNavClick(topnav, navIndex)">
            <div class="pos-rel">
              {{topnav.navName}}
              <div class="topnav--active" :style="{backgroundColor: topnavObj.propMap.selectFontColor}" v-if="topNavActive === navIndex"></div>
            </div>
          </div>
        </div>
      </div>
      <second-page :content="detailsList" :resData="resData" :enterpriceId="memberEnterpriseId"
        @countdowmFinish="countDownFinish" urlFrom="home" ></second-page>
    </div>
    <back-btn v-if="backBoolean" urlFrom="home" />
  </div>
</template>

<script>
  import GetUserInfo from '@/components/GetUserInfo'
  import GetPhoneLayer from '@/components/GetPhoneLayer'
  import GetPhoneInfo from '@/components/GetPhoneInfo'
  import headerNav from '@/components/headerNav'
  import BackBtn from '@/components/BackBtn'
  import secondPage from '@/components/CustomRichText/secondPage'
  import {
    getMemberInfo,
    getHomePage,
    getWholesaleAuthority,
    getByEnterpriseId,
    getCustomPage
  } from '@/api/home'
  import {
    setToken,
    setStoreCardFlag,
    setMemberNature,
    setShowBuyCard,
    setMemberId,
    setEnterpriseId,
    setWholesaleAuthority,
    setApplyWholesaleAuthority,
    setIsPerfectionInfo,
    setPayMethod
  } from '@/utils/auth'
  import { getAuth, checkLogin } from '@/api/login'
  import { appColor } from '@/api/appColor'
  import { getAppInfo } from '@/api/common'
  import { navList } from '@/api/navList'

  export default {
    components: { GetUserInfo, GetPhoneInfo, GetPhoneLayer, headerNav, BackBtn, secondPage },
    data() {
      return {
        spaceBarHeight: 0,
        memberInfo: {
          memberDetails: {}
        },
        customerInfo: {
          memberDetails: {}
        },
        isGetUserInfo: false,
        isGetPhoneLayer: false,
        isGetPhoneInfo: false,
        pageLoad: true,
        loadNum: 0,
        limitCount: '',
        pullLoad: {
          loading: false,
          finished: false
        },
        appInfo: {},
        iosType: false,
        detailsNone: false,
        detailsList: [],
        resData: {},
        linkList: {
          1001: '/pages/personal/coupon/coupon-center/main', // 领券中心
          1002: '/pages/contact-btn/main', // 微信客服
          1004: '/pages/shop/main', // 分类链接
          1005: '/pages/home/main', // 首页
          1006: '/pages/shop/main', // 分类
          1007: '/pages/shop/cart/main', // 购物车
          1008: '/pages/personal/main', // 个人中心
          1101: '/pages/home/second-custom/main', // 自定义页面
          1401: '/pages/home/live-list/main', // 直播列表
          1501: '/pages/home/default-seckill/main', // 限时秒杀
          2001: '/pages/shop/detail/main' // 商品详情
        },
        homeLoad: true,
        memberEnterpriseId: '',
        listQuery: {
          memberId: '',
          customerId: ''
        },
        promotionList: [],
        fastGoods: [],
        getAppInfo: {},
        applyStatus: null,
        config: {},
        headerNavH: 0,
        topNavActive: 0,
        topnavObj: {},
        pageBcConfig: {},
        skeletonLoading: true
      }
    },
    onLoad(options) {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.memberInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
      this.customerInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.appInfo = this.$pt.getStorageSync('appInfo')
      this.getAuth()
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') !== -1) {
        this.iosType = true
      }
      const scanApply = this.$pt.getStorageSync('scanApply')
      const applyWholesaleAuthority = this.$pt.getStorageSync('applyWholesaleAuthority')
      if (scanApply) {
        if (!this.getCustomerId) {
          this.isGetUserInfo = true
          this.$pt.hideTabBar({animation: false})
        } else {
          if (!this.getPhone) {
            // this.isGetPhoneLayer = true
            this.isGetPhoneInfo = true
            this.$pt.hideTabBar({animation: false})
          } else {
            if (applyWholesaleAuthority === 1) {
              this.$pt.navigateTo({ url: `/pages/home/apply-wholesale/main` })
            } else {
              return
            }
          }
        }
        return 0
      }
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },
    mounted() {
      this.initMemberInfo()
    },
    onShow() {
      this.loadNum = 0
      this.getAppEls()
      const reporter = this.getCurrentPage().page.__displayReporter.showReferpagepath
      if (this.pageLoad || reporter !== 'pages/shop/detail/main.html') {
        if (!this.getMemberId) {
          checkLogin(this.getMemberId)
          this.$pt.setStorageSync('homeNone', true)
        }
      }
      // 清除自定义二级页缓存ID
      if (this.$pt.getStorageSync('secondPage')) {
        this.$pt.removeStorageSync('secondPage')
      }
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        // this.listShop()
      }
    },
    onPullDownRefresh() {
      this.getAppEls()
      this.loadNum = 0
      this.skeletonLoading = true
      this.initMemberInfo()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    onShareAppMessage() {
      if (this.resData) {
        return {
          title: this.resData.shareTitle,
          path: 'pages/home/main',
          imageUrl: this.resData.sharePicUrl
        }
      } else {
        return {
          title: this.appInfo.appName,
          path: 'pages/home/main',
          imageUrl: this.fileSpace + '/images/share-s-picture-2.jpg'
        }
      }
    },
    onShareTimeline() {
      if (this.resData) {
        return {
          title: this.resData.shareTitle,
          imageUrl: this.resData.sharePicUrl,
          query: ''
        }
      } else {
        return {
          title: this.appInfo.appName,
          imageUrl: this.fileSpace + '/images/share-s-picture-2.jpg',
          query: ''
        }
      }
    },
    methods: {
      lowVersionEls() {
        this.$pt.showTabBar({
          animation: false
        })
      },
      getAppEls() {
        getAppInfo().then((response) => {
          if (response.isError) return
          let getAppInfo = response.data
          if (getAppInfo.enterpriseId) {
            navList(getAppInfo.enterpriseId)
          }
          if (getAppInfo.enterpriseId) {
            this.memberEnterpriseId = getAppInfo.enterpriseId
          }
          this.getAppInfo = appColor(getAppInfo)
          if (!this.getMemberId) {
            setMemberId(this.getAppInfo.defaultMemberId)
            this.$utils.setMyId(this.getAppInfo.defaultMemberId)
          }
        }).catch(() => {
        })
      },
      getAuth() {
        this.$pt.login({
          success(res) {
            if (res.code) {
              getAuth(res.code).then((response) => {
                setShowBuyCard(response.data.showBuyCard)
                setToken(response.data.token)
              }).catch(() => {
              })
            }
          }
        })
      },
      getByEnterpriseId(enterpriseId) {
        // 获取企业参数配置
        getByEnterpriseId({enterpriseId: enterpriseId}).then(response => {
          if (response.isError) return
          this.config = response.data
          setApplyWholesaleAuthority(response.data.applyWholesaleAuthority)
          // response.data.isOpenWholesaleCompulsoryPerfectionInfo = 1
          if (response.data.isOpenWholesaleCompulsoryPerfectionInfo) {
            setIsPerfectionInfo(response.data.isOpenWholesaleCompulsoryPerfectionInfo)
          } else {
            setIsPerfectionInfo(0)
          }
        }).catch({})
      },
      // 会员基本信息
      initCustomerInfo() {
        if (!this.getCustomerId) return
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.customerInfo = response.data
          if (this.customerInfo.payMethod) {
            setPayMethod(this.customerInfo.payMethod)
          } else {
            setPayMethod(1)
          }
        }).catch(() => {
        })
      },
      showPage() {
        this.isGetUserInfo = false
        this.isGetPhoneInfo = false
        this.$pt.showTabBar({animation: false})
      },
      authPhoneInfo() {
        const scanApply = this.$pt.getStorageSync('scanApply')
        if (scanApply) {
          this.isGetPhoneInfo = true
          this.$pt.hideTabBar({animation: false})
        } else {
          this.isGetPhoneLayer = true
          this.$pt.showTabBar({animation: false})
        }
      },
      authority() {
        getWholesaleAuthority(this.getCustomerId).then((response) => {
          if (response.isError) return
          setWholesaleAuthority(response.data.authorityStatus || '')
          if (!response.data.authorityStatus) {
            this.applyStatus = response.data.applyStatus
          } else {
            this.$pt.showTabBar({
              animation: false
            })
          }
        }).catch(() => {
        })
      },
      initMemberInfo() {
        this.loadNum++
        if (this.loadNum > 1) return
        this.initCustomerInfo()
        if (this.getCustomerId) {
          this.authority()
        }
        getMemberInfo(this.getMemberId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
          if (response.data.storeCardFlag) {
            setStoreCardFlag(response.data.storeCardFlag)
          }
          if (response.data.nature) {
            setMemberNature(response.data.nature)
          }
          if (response.data.enterpriseId) {
            setEnterpriseId(response.data.enterpriseId)
            this.getByEnterpriseId(response.data.enterpriseId)
            this.memberEnterpriseId = response.data.enterpriseId || ''
            if (this.topNavActive === 0) {
              this.getHomePage()
            }
          }
          this.getByEnterpriseId(this.memberEnterpriseId)
          // 微信审核可运行首页自定义
          if (!this.getShowBuyCard) {
            this.$utils.showToast({
              title: '请求中',
              icon: 'loading'
            })
            setTimeout(() => {
              this.$pt.hideToast()
              this.getHomePage()
            }, 1000)
          }
        }).catch(() => {
        })
      },
      headerNavHeight(height) {
        // 获取头部状态栏与店主栏的总高度
        this.headerNavH = height
      },
      topNavClick(item, index) {
        clearTimeout(this.timer)
        this.timer = null
        this.timer = setTimeout(() => {
          if (this.topNavActive === index) return
          this.topNavActive = index
          this.getHomePage()
        }, 500)
      },
      countDownFinish() {
        this.getHomePage()
      },
      getHomePage() {
        this.resData = {}
        this.detailsList = []
        // 获取首页自定义信息
        let params = {
          enterpriseId: this.memberEnterpriseId,
          memberId: this.getMemberId,
          customerId: this.getCustomerId
        }
        if (!this.getShowBuyCard) {
          params.customerId = this.getMemberId
        }
        this.skeletonLoading = true
        getHomePage(params).then(response => {
          if (response.isError) return
          this.$pt.hideToast()
          setTimeout(() => {
            this.skeletonLoading = false
          }, 800)
          if (Object.keys(response.data).length !== 0) {
            this.resData = response.data
            if (this.resData.titleType === 11) {
              this.$pt.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: this.resData.titleBackgroundColor
              })
            } else {
              this.$pt.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: this.resData.titleBackgroundColor
              })
            }
            let dataList = response.data.detailsList ? response.data.detailsList : []
            if (dataList.length > 0) {
              let topnavList = dataList.filter(item => item.componentType === 41)
              this.topnavObj = {}
              if (topnavList.length > 0) {
                let list = this.topnavObj = topnavList[0]
                if (list.topNavList[this.topNavActive].linkType === 1101) {
                  const linkParams = list.topNavList[this.topNavActive].linkParams.split('=')[1]
                  // 调取自定义组件数据请求方法
                  return this.getCustomPage(linkParams)
                }
                // 首页数据的封装
                this.detailsList = dataList.filter(item => item.componentType !== 41)
              } else {
                this.detailsList = dataList
              }
              this.pageBcConfig = response.data
            }
          } else {
            this.resData = {}
            this.detailsList = []
            this.$pt.setNavigationBarColor({
              frontColor: '#000000',
              backgroundColor: '#ffffff'
            })
          }
        })
      },
      getCustomPage(linkParams) {
        // 获取自定义组件页面的数据
        const params = {
          pageId: linkParams || '',
          memberId: this.getMemberId,
          customerId: this.getCustomerId,
          enterpriseId: this.getEnterpriseId ? this.getEnterpriseId : ''
        }
        getCustomPage(params).then(response => {
          if (response.isError) return
          this.$pt.hideToast()
          this.pageBcConfig = response.data
          this.detailsList = response.data.detailsList
          this.$pt.pageScrollTo({
            scrollTop: 0
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .container{
    background-color: #fff;
    min-height: 100vh;
    background-size: 100%;
    background-repeat: no-repeat;
    .skeleton-box{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1100;
      background-color: #fff;
      overflow: hidden;
      .skeleton-layer{
        margin: 15px;
        &.bg-box{
          border-radius: 10px;
          background-color: #f5f5f5;
        }
        .bg-box{
          border-radius: 10px;
          background-color: #f5f5f5;
        }
        &.layer-1{
          margin-top: 80px;
          height: 110px;
        }
        &.layer-2{        
          span{
            display: block;
            height: 60px;
            &:last-child{
              margin-right: 0!important;
            }
          }
        }
        &.layer-4{
          .flex-item{
            span{
              display: block;
              border-radius: 5px;
            }
          }
        }
      }
    }
    .skeleton-layer-bg{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 99;
    }
    .topnav{
      position: fixed;
      z-index: 99;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      height: 42px;
      overflow: auto;
      flex-flow: nowrap;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar{
        display: none; /* Chrome Safari */
      }
      .topnav--item{
        flex: 1;
        height: 42px;
        line-height: 42px;
        text-align: center;
      }
      .topnav--scroll{
        flex-shrink: 0;
        flex-basis: 19%;
      }
      .topnav--active{
        width: 20px;
        height: 2px;
        border-radius: 1px;
        position: absolute;
        left: 50%;
        bottom: 4px;
        transform: translateX(-50%);
      }
    }
    /deep/ .van-tabs__scroll{
      background: none;
    }
    /deep/ .van-tab{
      color: #fff;
      font-size: 14px;
      padding: 0;
    }
    /deep/ .van-tab--active{
      color: #fff;
      font-size: 15px;
      font-weight: bold;
    }
    /deep/ .van-tabs__line{
      bottom: 5px;
    }
    .home-bar{      
      color: #919191;
      background-size: 375px 40px!important;
      min-height: 40px;
      padding-top: 6px;
      box-sizing: border-box;
      position: relative;
      z-index: 5;
      &.layer-on{
        background: #fff!important;
        .home-search{
          background: #f6f6f6;
        }
      }
      .home-search{
        background: #fff;
        border-radius: 13px;
        height: 34px;
      }
    }
    .tab-menu{
      background-size: 375px 42px!important;
      min-height: 42px;
      padding-right: 45px;
      box-sizing: border-box;
      width: 100%;
      position: relative;
      z-index: 10;
      .tab-more{
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0px;
        z-index: 11;
        background-size: 40px 40px!important;
        &.tab-more-and{
          top: 4px;
        }
      }
    }
    .tab-layer{
      background: #fff;
      background-size: 375px 42px!important;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 25;
      width: 100%;
      .icon-arrow-right{
        transform:rotate(-90deg);
      }
      ul{
        margin-top: -5px;
        padding-bottom: 12px;
        &:after{
          content: '';
          display: block;
          clear: both;
          font-size: 0;
        }
        li{
          width: 21%;
          float: left;
          text-align: center;
          background: #f7f5f6;
          margin: 5px 2%;
          padding: 10px 0;
          line-height: 1;
          border-radius: 10em;
          &.actived{
            background: linear-gradient(to right, #ff9345, #ff6c37);
            color: #fff;
          }
        }
      }
    }
    .tab-layer-bg{
      position: fixed;
      left: 0;
      top: 0px;
      z-index: 3;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
    }
    .nodata{
      margin: 80px 0 0 0;
      text-align: center;
      img{
        margin: 0 auto;
      }
    }
  }
  .home-load {
    text-align: center;
    img {
      display: inline-block;
    }
  }
  .nodata {
    margin-top: 20px;
    .goSetting {
      margin-top: 60px;
      button {
        width: 133px;
        height: 33px;
        background: #333333;
        line-height: 33px;
        padding: 0;
        color: white;
        font-size: 15px;
      }
    }
  }
  .module-box {
    .title-bar {
      h2 {
        margin: 0;
        padding: 0;
      }
    }
    .timer {
      .timer-t {
        color: #818181;
      }
    }
    ul {
      padding: 0;
      margin: 0;
      &:after {
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      &.show-type-1 {
        li {
          &:last-child {
            margin-bottom: 0;
          }
          .detail-box {
            padding: 12px 12px 8px 12px;
          }
          .gooods-pic {
            img {
              width: 100%;
              height: 190px;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
            }
            &.pos-rel {
              &.del-show {
                .del-layer-bg {
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }
                .del-layer {
                  &.stock-none {
                    label {
                      margin-top: 12%;
                    }
                  }
                  label {
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    font-size: 24px;
                    margin-top: 8%;
                  }
                  p {
                    font-size: 15px;
                    margin-top: 3%;
                  }
                }
              }
            }
          }
        }
      }
      &.show-type-2 {
        li {
          width: 48%;
          float: left;
          &:nth-child(odd) {
            margin-right: 4%;
          }
          .detail-box {
            padding: 8px 10px 5px 10px;
          }
          .desc {
            margin-bottom: 8px !important;
          }
          .gooods-pic {
            img {
              width: 100%;
              height: 160px;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
            }
            &.pos-rel {
              &.del-show {
                .del-layer-bg {
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }
                .del-layer {
                  &.stock-none {
                    label {
                      margin-top: 26%;
                    }
                  }
                  label {
                    width: 70px;
                    height: 70px;
                    line-height: 70px;
                    font-size: 16px;
                    margin-top: 18%;
                  }
                  p {
                    font-size: 12px;
                    margin-top: 6%;
                  }
                }
              }
            }
          }
          .buy-now-type {
            display: none;
          }
          .height-s-item {
            height: 19px;
            margin-bottom: -1px;
          }
          .price {
            .label-s {
              display: none;
            }
          }
          button.remove-type {
            font-size: 10px;
            padding: 4px 6px;
            margin-right: -4px;
          }
          .info-bar {
            .remove-type {
              display: none !important;
            }
          }
          .line-item.remove-type {
            display: inline-block !important;
          }
          .last-item.remove-type {
            display: none !important;
          }
        }
      }
      &.show-type-3 {
        li {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          flex-flow: row;
          align-items: center;
          padding: 10px 10px;
          &:last-child {
            margin-bottom: 0;
          }
          .pic-box {
            margin-right: 6px;
            .gooods-pic {
              img {
                width: 100px;
                height: 100px;
              }
              &.pos-rel {
                &.del-show {
                  .del-layer {
                    &.stock-none {
                      label {
                        margin-top: 22%;
                      }
                    }
                    label {
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      margin-top: 14%;
                      font-size: 13px;
                    }
                    p {
                      font-size: 10px;
                      margin-top: 5%;
                    }
                  }
                }
              }
            }
          }
          .detail-box {
            padding: 0px 2px 0px 7px;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
          }
          .tag {
            span {
              padding: 1px 5px !important;
            }
          }
          .price {
            .label-s {
              display: none;
            }
          }
          .stock {
            display: none;
          }
          .info-bar {
            &.true {
              .buy-now-type {
                display: none !important;
              }
            }
            .remove-type.line-item {
              display: none !important;
            }
            .remove-type {
              display: block !important;
            }
          }
          .last-item {
            display: none !important;
          }
        }
      }
      &.show-type-4 {
        li {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          flex-flow: row;
          align-items: center;
          padding: 10px 10px;
          &:last-child {
            margin-bottom: 0;
          }
          &:nth-child(even) {
            .pic-box {
              &.even {
                display: none;
              }
              &.odd {
                display: block;
                margin-right: 0;
                margin-left: 14px;
              }
            }
          }
          &:nth-child(odd) {
            .pic-box {
              &.even {
                display: block;
              }
              &.odd {
                display: none;
              }
            }
          }
          .desc {
            margin-bottom: 6px !important;
          }
          .pic-box {
            margin-right: 14px;
            .gooods-pic {
              img {
                width: 122px;
                height: 122px;
              }
              &.pos-rel {
                &.del-show {
                  .del-layer {
                    &.stock-none {
                      label {
                        margin-top: 26%;
                      }
                    }
                    label {
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      margin-top: 20%;
                      font-size: 13px;
                    }
                    p {
                      font-size: 10px;
                      margin-top: 5%;
                    }
                  }
                }
              }
            }
          }
          .detail-box {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            padding: 0px !important;
          }
          .desc {
            margin-bottom: 13px;
          }
          .tag {
            margin-top: -1px;
            margin-bottom: -2px;
            span {
              padding: 1px 5px !important;
            }
          }
          .price {
            .flex-item {
              .label-f {
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-left: 0;
              }
              .tag-xs-t {
                color: #292929;
                display: inline-block;
                vertical-align: bottom;
                margin-bottom: -2px;
              }
              .label-s {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                margin-top: -6px;
                margin-left: -2px;
              }
            }
          }
          .stock {
            display: none;
          }
          .info-bar {
            .remove-type {
              display: none !important;
            }
            .buy-now-type {
              display: none !important;
            }
          }
          .last-item {
            display: inline-block !important;
            margin-top: 5px;
          }
        }
      }
      li {
        list-style-type: none;
        border-radius: 4px;
        box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
        margin-bottom: 13px;
        background-color: #fff;
        .detail-box {
          padding: 12px;
        }
        .buy-now-type {
          background: #fed806 !important;
          border: #fed806 1px solid !important;
          padding: 4px 9px;
          line-height: normal;
          color: #333 !important;
          &:after {
            display: none;
          }
        }
        .remove-type {
          background: #292929 !important;
          border: #292929 1px solid !important;
          padding: 4px 9px;
          line-height: normal;
          color: #fff !important;
          &:after {
            display: none;
          }
        }
        .pic-box {
          &.odd {
            display: none;
          }
        }
        .gooods-pic {
          &.pos-rel {
            &.del-show {
              .del-layer-bg {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.7);
                z-index: 10;
              }
              .del-layer {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 11;
                text-align: center;
                color: #fff;
                display: block;
                &.stock-none {
                  label {
                    margin-top: 18%;
                  }
                }
                label {
                  width: 50px;
                  height: 50px;
                  line-height: 50px;
                  margin-top: 15%;
                  font-size: 13px;
                  background: rgba(0, 0, 0, 0.7);
                  border: rgba(255, 255, 255, 0.7) 1px solid;
                  border-radius: 100px;
                  display: inline-block;
                }
                p {
                  display: block;
                  font-size: 10px;
                  margin-top: 5%;
                }
              }
            }
          }
          img {
            display: block;
          }
        }
        .desc {
          height: 37px;
          line-height: 1.3;
          overflow: hidden;
          color: #595959;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-word;
        }
        .line-item {
          display: none;
        }
        .last-item {
          display: none;
        }
        .info-bar {
          > button {
            margin-bottom: 3px;
          }
          .tag {
            line-height: 1.3;
            .label-f {
              background: #fed807;
              color: #333;
              padding: 2px 5px;
            }
            .label-s {
              background: #272727;
              color: #fff;
              padding: 2px 5px;
              min-width: 60px;
              box-sizing: border-box;
              span {
                color: #ffc81b;
                font-style: normal;
                &.income-label {
                  padding: 0 !important;
                }
              }
            }
          }
          .price {
            .tag-xs-t {
              display: none;
            }
            .label-f {
              color: #ff0000;
            }
            .label-s {
              color: #292929;
              text-decoration: line-through;
            }
          }
          .stock {
            color: #818181;
          }
          label {
            font-weight: normal;
          }
        }
      }
    }
  }
  .top-swiper {
    width: 375px;
    height: 158px;
  }
  .top-img {
    width: 375px;
    height: 158px;
  }
  .type-10 {
    color: #ffb025;
    background: #fefae6;
    display: inline-block;
    padding: 0 2px;
    border-radius: 5px;
    overflow: hidden;
  }
  .type-30 {
    color: #ff5900;
  }
  .none-t-1 {
    font-size: 15px;
    color: #666;
    margin-top: 10px;
  }
  .none-t-2 {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
  }
  .goods-price {
    color: #f94035;
  }
  .border-b {
    border-bottom: #f2f2f2 1px solid;
  }
  .border-pre {
    border-bottom: #f5f5f5 10px solid;
  }
  .panel {
    border-radius: 6px;
  }
  .img-item {
    width: 120px;
    height: 120px;
  }
  .goods-title {
    height: 46px;
    line-height: 1.8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  // 编辑按钮
  .preview-btn {
    width: 54px;
    height: 54px;
    position: fixed;
    bottom: 95px;
    z-index: 100;
    color: #ffb801;
    border-radius: 100px;
    font-size: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    &.box-shadow {
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    }
    &.fixed-btn {
      transition: 0.3s;
      right: 5px;
      opacity: 1;
      background: linear-gradient(45deg, #3f3f3f, #606060);
      image {
        display: inline-block;
        margin-top: 9px;
        margin-bottom: -6px;
      }
    }
  }
</style>
